<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <link rel="stylesheet" href="https://libs.cdnjs.net/twitter-bootstrap/1.4.0/css/bootstrap.css" />

</head>
<body>
<div id="app">
    <p id="msg">{{ msg }}</p>
    <input type="button" value="modify" @click="msg='ok'">
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            msg:"hello"
        },
        methods: {
        },
        // 生命周期函数
        // 完全创建前，此时el data methods等都未初始化
        beforeCreate() {
            console.log('beforeCreate')
        },
        // 此时 data和methods都已经被初始化
        created() {
            console.log('create', this.msg); // 数据或者方法最早的可用生命周期函数
        },
        beforeMount() { // el对应的元素模板编译完成，此时还未挂载到浏览器
            // 此时，模板中的变量还未替换为实际数据
            console.log('beforeMount', this.msg);
        },
        mounted() { // 模板已经挂载到页面，已经可见，数据已经替换为实际数据
            // 此时vm实例已经创建完毕
            // 操作dom元素，最早在此处操作
        },
        beforeUpdate() {
            // 数据发生改变时，更新前调用该方法，此时数据已经被更新了，但是页面还没更新
            console.log('beforeUpdate', document.getElementById("msg").innerText); // 还未改变
            console.log('beforeUpdate', this.msg); // 按钮点击后，已经改变
        },
        updated() {
            // 数据和页面数据已经同步
        },
        beforeDestroy() {
            // 还没有执行正式的销毁，所有属性和数据都还可用
        },
        destroyed() {
            // 所有数据和组件已经销毁
        }
    });
</script>
</body>
</html>
